<template>
	<view style="background-color: #f9f9f9;">
		
		

	<!-- 	<view class="header">
			
			<view class="tempbox">
<!-- 				监控温度img -->
<!-- 				<image src="../../static/images/tempIconWhite.png" alt="icon" class="temp-icon"></image>
			<span class="temp-text" @click="monitorDevice()">点我开始监控温度</span>
				</view>
		</view> -->
		
		<view class="center" v-if="init">
			<view class="qiun-columns">
				<uCharts id="ucharts"
						 :val="temp_obj.value"
						 :min="opts.min"
						 :max="opts.max"
						 :step="opts.step"
						 :width="opts.width"
						 :height="opts.height"
						 :border="opts.border"
						 :title="opts.title"
						 :showUnit="opts.showUnit"
						 :unit="opts.unit"
						 :showDecimal="opts.showDecimal"
						 :colorSatrt="opts.colorSatrt"
						 :colorEnd="opts.colorEnd"
						 :colorButton="opts.colorButton"
						 :pageBg="opts.pageBg"
						 :circleBg="opts.circleBg"
						 :pointBg="opts.pointBg"
						 :setUpUrl="opts.setUpUrl"
						 @change="change"
						 ref="ucharts" />
			</view>
		</view>
			
			<!-- <image class="centerimg" src="../../static/images/tempCircle.png" mode=""></image>
		</view>
<!-- 		<image class="onoffimg" src="../../static/images/myPointError1img.png" @click="monitorDevice()" mode="aspectFit"></image>
		<!-- <view class="container-small">
			
		
		</view> -->
		<view style="background-color: white;">
			
			<image class="onoffimg" src="../../static/images/myPointError1img.png" @click="alerts('点击+号或-号设置故障警报')" mode="aspectFit"></image>
			<view class="container">
					 <view class="row">
						 <view class="label-title">设备信息</view>
						 </view>
				    <view class="row">
				      <view class="label">设备名称:</view>
				      <picker class="picker" mode="selector" disabled="true" :range="[1,2,3]">
				        <view class="picker-view">{{ device.customName }}</view>
				      </picker>
				    </view>
				    <view class="row">
				      <view class="label">所属产线:</view>
				      <picker class="picker" mode="selector" disabled="true" :range="[1,2,3]">
				        <view class="picker-view">{{ device.productionName }}</view>
				      </picker>
				    </view>
				   <view class="row">
						<label class="label">温度监控持续时间(秒)：</label>
						<input class="input" type="number" v-model="monitorConfig.timeout"/>
				   </view>
<!-- 							<view class="header"> -->
					 <view class="tempbox">
							<image  style="margin-top: 15px; margin-bottom: 10px;" src="../../static/images/tempIconWhite.png" alt="icon" class="temp-icon"></image>
								<!-- <span class="temp-text">温度检测</span> -->
							<view style='display: flex; flex-direction: column; gap: 8px;' @click="monitorDevice()">
								<view class="label-title" style="margin-top: 5px; margin-bottom: 0px;">
								 <!-- 				监控温度img -->
								 <!-- 				<image src="../../static/images/tempIconWhite.png" alt="icon" class="temp-icon"></image> -->
									<span class="temp-text">
										{{isMonitoring==false?'点击开始监控温度':'正在监控中'}}
									</span>
								</view>
								 <!-- 				监控温度img -->
								 <!-- 				<image src="../../static/images/tempIconWhite.png" alt="icon" class="temp-icon"></image> -->
									<span class="temp-text" :style="monitorStyle">{{"状态：" + monitorMsg}}</span>
							</view>
						</view>  	

<!-- 							   </view> -->
					<view  class="modal-footer"> 
					<button class="confirm-button" @click="openModal">
						修改设备
					</button>
						
						<button class="delete-button"  @click="handleReboot">
							重启设备
						</button>
						<button class="delete-button"  @click="showDeleteConfirmation">
							删除设备
						</button>
			<!-- 				<button class="delete-button" @tap="changeAlertData()">设置预警温度：(℃)</button> -->
						
					</view>
					
				  </view>

		</view>
		
		  <view v-if="showModal" class="modal-overlay">
		      <view class="modal-content" style="font-size: 30rpx;">
		        <view class="modal-header">
		          <span class="modal-title">修改设备属性</span>
		          <span class="close-button" @click="closeModal">&times;</span>
		        </view>
		        <view class="modal-body">
		          <view class="form-group">
		            <label>设备名：</label>
		            <input type="text" v-model="device.customName"/>
		          </view>
		          <view class="form-group">
		            <label>所属产线：</label>
					<picker class="picker-o" mode="selector" :range="productions" @change="productionLineChange">
					  <view class="picker-view">{{ selectedProductionLine }} </view> 
					</picker>
		          </view>
				  <view class="form-group">
				    <label>温度监控持续时间(秒)：</label>
				    <input type="number" v-model="monitorConfig.timeout"/>
				  </view>
		        </view>
		        <view class="modal-footer">
		          
		          <button class="confirm-button" @click="confirmChanges">确认修改</button>
		        </view>
		      </view>
		    </view>
			
		<!-- Delete Dialog s删除设备-->
		<view v-if="showDeleteDialog" class="delete-dialog">
			<view class="modal-header"><text class="del-class">确认删除 {{ device.customName }} 吗</text></view>
			<view class="modal-body">
				<!-- <view class="form-group">
				<label style="font-size: 16rpx; width: 100%; margin-bottom: 8rpx;">注意：只有产线内没有设备，才可以删除产线</label> 
				</view> -->
				</view>
		    <view class="dialog-buttons">
		      <button @click="deleteDevice" style="background-color:#8DC2FF; color: white; width: 200rpx;">确认</button>
		      <button @click="cancelDelete" style="background-color:#8DC2FF; color: white; width: 200rpx;">取消</button>
		    </view>
			</view>
			
			
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/bar.vue';
	var _self;
	import { listDevice, listDelDevice, listProductionDevice, postDataToAllProduction, postDataToADevice, delDevice, updateDevice  } from "@/api/system/device.js";
	import { listRoom, getRoom, delRoom, addRoom, updateRoom } from "@/api/system/room.js";
	import {getCache, setCache, removeCache} from "@/utils/cache.js";
	import {getTempratureVal, setTempratureRaw} from "@/utils/temprature.js";
	import msgUtils from "@/plugins/modal.js";
	
	export default {
		data() {
			return {
				  monitorConfig:{
					  timeout:10,
					  intervalInMs:1500
				  },
					
					monitorMsg:'',
					monitorFlag:false,
					monitorTimeoutFlag:false,
					monitorStyle:"background-color: #ffffff;",
					isMonitoring:false,
					
					init:false,
					initPromise:{},
				  showModal: false,
				    roomToDelete: '',
					  showDeleteDialog: false,
					  indexToDelete: null,
				  deviceName: '设备1',
				  temp_obj:{
						value: 0,
						msg: '0',
					},
				  device:{},
				   names: ['设备1', '设备2', '设备3'],
				   productionLineId: 0,
				   selectedProductionLineId: 0,
				   productions: [],
				   productionList: [],
				   selectedNameIndex: 0,
				   selectedProductionLineIndex: 0,
				   temperature:10, // 默认温度值					   
				   simple:18,
				   showUnit:true,
				   opts:{
						val:15.8,
						min:0,
						max:99,
						step:1,
						width:270,
						height:270,
						border:35,
						title:'当前温度',//传null为不显示最上面标题
						showUnit:true,//是否显示单位
						unit:'℃',
						showDecimal:true,//是否小数
						colorSatrt:'#a4ecff',
						colorEnd:'#8DC2FF',
						colorButton:'#565656',//底部按钮颜色
						pageBg:'#FFFFFF',//组件页面背景色，如果父组件像本示例设置了padding,你懂的哈
						circleBg:'#FFFFFF',//中间圆心文字块的背景色
						pointBg:'#FFFFFF'//控制点背景色
						// setUpUrl:'../../page/testurl'//设置那个按钮跳转的地方
				   },
					queryParams:{
						
					},
					postData:{
						type: -2,
						name: "",
						controlMessage: {
							operation: "",
							deviceKey: "",
							requireParams: "false",
							params: {
								status: -2
							},
							deviceSecret: "0"
						}
					}
				};
			},
			
			components: {
				uCharts
			},
			
			onLoad(option) {
				_self = this;
				// console.log(option.name+'-&&-'+option.pId)
				if(getCache("colorOptions")){
					this.opts = getCache("colorOptions")
				}
				this.deviceName = option.name;
				this.productionLineId = option.pId;
				this.postData.name = option.name
				this.productionList = getCache("production");
				this.productions = this.generateLineNames(getCache("production"));
				this.getServerData();
			},
			onBackPress() {
				// console.log(111)
				this.monitorMsg = "点我开始监控温度"
				clearInterval(this.monitorFlag) // 清除setInterval定时器
				clearTimeout(this.monitorTimeoutFlag) // 清除setTimeout定时器
				this.isMonitoring = false
				console.log(this.monitorMsg)
				msgUtils.msgSuccess("结束监控温度")
			},
		  computed: {
		    selectedName() {
		      return this.names[this.selectedNameIndex];
		    },
		    selectedProductionLine() {
				//console.log(this.selectedProductionLineIndex)
		      return this.productions[this.selectedProductionLineIndex];
		    }
		  },
	 methods: {
		 alerts(msg00){
			 msgUtils.alert(msg00)
		 },
		 generateLineNames(lines){
			 var linenames = [];
			 for(let i = 0;i<lines.length;i++){
				 linenames.push(lines[i].name)
			 }
			 return linenames;
		 },
		 nameChange(e) {
			 this.selectedNameIndex = e.detail.value;
		 },
			 productionLineChange(e) {
			 //console.log(e)
				 this.selectedProductionLineIndex = e.detail.value;
				},
			 changeBackground(isMonitoring, msg) {
				 msg = msg == 'OK'?'温度正常':msg;
				 this.monitorMsg = msg;
				if(isMonitoring && (msg != "OK" && msg != "温度正常")){
					this.monitorStyle = "background-color: red;"
				} else {
					this.monitorStyle = "background-color: #ffffff;"
				}
				if(isMonitoring){
					this.init = false
					setTimeout(()=>{
						this.init = true
					},3)
				}
				console.log(isMonitoring, msg)
				if(msg != "OK" && msg != "温度正常") {
					//变红
					this.opts.colorSatrt='#FFFF00';//黄色
					this.opts.colorEnd='#FF0000';//红色
					setCache("colorOptions", this.opts)
					if(!isMonitoring){
						this.monitorStyle = "background-color: red;"
					}
					//console.log(111111111)
				} else {
					//变蓝
					this.opts.colorSatrt='#a4ecff';
					this.opts.colorEnd='#8DC2FF';
					setCache("colorOptions", this.opts)
				}
			 },
		async explainData(jsonStr) {
			try {
				// 解析 JSON 字符串
				var data = JSON.parse(jsonStr);
				
				// 从解析后的对象中提取值
				var tempVal = data.status.value;
				var msg = data.data.value;
				
				// 处理温度值
				tempVal = getTempratureVal(tempVal);
				
				// 设置温度对象的值和消息
				this.temp_obj.value = tempVal;
				this.temp_obj.msg = msg;
				
				// 打印处理后的温度对象
				console.log(this.temp_obj);
				
				// 可以在这里执行其他逻辑，如更新 UI 或发送数据等
				
				// 如果一切顺利，返回一个成功的结果
				return { success: true, data: this.temp_obj };
			} catch (err) {
				// 捕获并处理错误
				console.error(err);
				
				// 返回一个被拒绝的 Promise，表示操作失败
				return Promise.reject({ success: false, error: err });
			}
		},
		async getPDeviceList() {
			try {
				// this.loading = true;
				// msgUtils.loading("加载中");
				var query = { name: this.deviceName };
				// console.log(this.productionLineId);

				// 直接使用 await 而不是创建一个新的 Promise
				const response = await listProductionDevice(this.productionLineId, query);
				this.device = response.rows[0];

				// 假设 explainData 返回一个 Promise
				await this.explainData(this.device.data);

				// console.log(response.rows);
				// console.log(this.device);

				// this.loading = false;
				// msgUtils.closeLoading();
				return 0; // 返回一个成功的结果
			} catch (error) {
				// 捕获并处理错误
				console.error('An error occurred:', error);

				// 根据你的错误处理逻辑，抛出错误或返回一个错误码
				throw error; // 或者返回一个特定的错误码
			}
		},
		postAlertData() {
			// var d = 
			// {
			// 	type: this.device.type,
			// 	name: this.device.name,
			// 	controlMessage: {
			// 		operation: "setMaxTemperature",
			// 		deviceKey: this.device.name,
			// 		requireParams: true,
			// 		params: {
			// 			status: 
			// 		},
			// 		deviceSecret: "0"
			// 	}
			// };
			const data = this.postData;
			data.controlMessage = {
				operation: "setMaxTemperature",
				deviceKey: this.device.name,
				requireParams: "true",
				params: {
					status: setTempratureRaw(this.alarmTemp)
				},
				deviceSecret: "0"
			}
			data.controlMessage = JSON.stringify(data.controlMessage)
			 // "controlMessage": "{\"operation\":\"setMaxTemperature\",\"deviceKey\":\"point_003\",\"requireParams\":\"true\",\"params\":{\"data\":\"OK\",\"status\":5000},\"deviceSecret\":\"111\"}"
			postDataToADevice(this.monitorConfig,data).then(res=>{
				msgUtils.msgSuccess("设置成功，15秒内生效")
			})
			console.log(data)
		},
	    openModal() {
	      this.showModal = true;
	    },
	    closeModal() {
	      this.showModal = false;
	    },
		
		handlePost(data){
			// msgUtils.loading("加载中...")
			return new Promise((res,rej)=>{
				postDataToADevice(this.monitorConfig,data).then(res=>{
					// msgUtils.closeLoading()
				}).catch(err=>{
					reject(err)
				})
			});
		},
		handleDelete(){
			const data = this.postData;
			data.controlMessage = {
				operation: "resetWifi",
				deviceKey: this.device.name,
				requireParams: "false",
				params: {},
				deviceSecret: "0"
			}
			data.controlMessage = JSON.stringify(data.controlMessage)
			// const postPromise = this.handlePost(data)
			// this.handlePost(data)
			return new Promise((res,rej)=>{
				this.handlePost(data).catch(err=>{
					console.log(err)
					reject(err);
				})
				delDevice(this.device.id).then(res=>{
					console.log(res.msg)
					msgUtils.msgSuccess(res.msg)
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
					resolve(res.msg)
				}).catch(err=>{
					reject(err)
				})
			});
		},
		handleReboot(){
			const data = this.postData;
			data.controlMessage = {
				operation: "reboot",
				deviceKey: this.device.name,
				requireParams: "false",
				params: {},
				deviceSecret: "0"
			}
			data.controlMessage = JSON.stringify(data.controlMessage)
			msgUtils.msg("正在重启设备...")
			setTimeout(()=>{
				this.handlePost(data)
			},2000)
		},
	    deleteDevice() {
	      // 删除设备的逻辑
		  this.handleDelete().then(res=>{
			  msgUtils.msgSuccess("删除设备成功")
		  }).catch(err=>{
			  console.log(err)
		  })
	      this.closeModal();
		  this.showDeleteDialog = false;
	    },
monitorDevice() {
  // 监控设备的逻辑
	this.changeBackground(this.init, this.temp_obj.msg)
  if(this.isMonitoring){
    msgUtils.msgError("不能重复监控！");
    return -1
  } else {
    this.isMonitoring = true
  }
  msgUtils.msg("开始监控温度")

  this.monitorTimeoutFlag = setTimeout(() => {
    this.monitorMsg = "点我开始监控温度"
		this.getServerData();
    clearInterval(this.monitorFlag) // 清除setInterval定时器
		clearTimeout(this.monitorTimeoutFlag) // 清除setTimeout定时器
    this.isMonitoring = false
		console.log(this.monitorMsg)
    msgUtils.msgSuccess("结束监控温度")
  }, this.monitorConfig.timeout * 1000)

  // 判断温度是否正常逻辑
  this.monitorFlag = setInterval(() => {
    var json_monitor_data = JSON.parse(this.device.data);
    this.monitorMsg = json_monitor_data.data.value == "OK" ?
    "温度正常" : json_monitor_data.data.value;
    // this.changeBackground(true, this.monitorMsg)
		this.changeBackground(this.init, this.temp_obj.msg)
		
    // 温度不正常
    if(json_monitor_data.data.value != "OK") {
      uni.createPushMessage({
        title:'设备温度过高，请及时处理',
        content:this.deviceName + '点位温度已达到' + json_monitor_data.status.value/100 + '℃，已高于您所设定的预警温度，请及时处理！',
        sound:'system',
        cover:true,
      });
    }
    console.log(this.monitorMsg)
    this.getPDeviceList().catch(err => {
      console.log(err)
      clearInterval(this.monitorFlag) // 如果获取设备列表失败，也清除setInterval定时器
    })
  }, this.monitorConfig.intervalInMs)
},
	    confirmChanges() {
			var id = this.productionList[this.selectedProductionLineIndex].id;
			//console.log(id + this.deviceName)
			msgUtils.loading('修改中')
			console.log({"productionId":id, "name":this.deviceName, "customName":this.device.customName})
			updateDevice({"productionId":id, "name":this.deviceName, "customName":this.device.customName}).then(res=>{
				console.log(res)
				msgUtils.closeLoading()
			});
	      // 确认修改的逻辑
	      this.closeModal();
	    },
		change(val_obj){
			// if 1-4 刷新 无操作 设置预警温度 无操作
			if(val_obj.changed==false && val_obj.msg=='当前温度'){
				this.getServerData();
				this.opts.title = val_obj.msg;
				if(val_obj.refresh == true){
					msgUtils.msgSuccess("刷新成功");
				}
			} else if(val_obj.msg=='设置预警温度' && val_obj.changed == false){
				this.opts.title = val_obj.msg;
			} else if(val_obj.changed == true){
				this.opts.title = val_obj.msg;
				this.alarmTemp = val_obj.val;
				this.postAlertData()
			} else{
				console.log(val_obj)
			}
		},
		async getServerData() {
			try {
				// this.productionLineId = getCache('room');
				
				// 等待 getPDeviceList 函数执行完成
				const ret = await this.getPDeviceList();
				
				// console.log(this.device);
				
				// 假设 getPDeviceList 正确设置了 this.device
				if (this.device) {
					this.postData.type = this.device.type;
					this.selectedProductionLineIndex = this.productions.indexOf(this.device.productionName);
					
					console.log(this.temp_obj.msg);
					this.changeBackground(this.init, this.temp_obj.msg);
					this.init = true;
					setTimeout(()=>{
						this.changeData(this.temp_obj.value);
					},333)
				}

				// console.log(this.device);
				// this.explainData(this.device);
			} catch (error) {
				// 捕获并处理错误
				console.error('An error occurred:', error);
				// 根据错误处理逻辑，可能需要抛出错误或进行其他处理
				throw error;
			}
		},
		changeData(val) {
			//作为调用组件内方法的示例，您自由想象发挥哈
			this.$refs.ucharts.changeData(val);
		}, 
		showDeleteConfirmation() {
		  // Show delete confirmation dialog
	
		  this.showDeleteDialog = true;
		},
		cancelDelete() {
			      // Cancel delete operation
			    this.showDeleteDialog = false;
			    }
	  }
	}
</script>

<style lang="scss">
	
	@import url("@/css/common.css");
	
	.delete-dialog {
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  background-color: white;
	  padding: 20rpx;
	  border-radius: 10rpx;
	  border: 1rpx solid #ccc;
	  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
	  width: 85%;
	  height: 250rpx;
	  align-items: center;
	  justify-content: center; 
	  z-index: 3;
	  
	}
	
	.del-class{
	/* 	display: flex;
		font-size: 22rpx;
		margin-bottom: 10rpx; */
		font-size: 35rpx;
		// font-weight: bold;
		color: #8DC2FF;
		border: 2rpx solid #ffffff;
		margin-bottom: 15rpx;
		margin-top: 12rpx;
	}
	
	.dialog-buttons {
	  display: flex;
	  justify-content: flex-end;
	  margin-top: 35rpx;
	  font-size: 16rpx;
	
	  color: #8DC2FF;
	}
	
	.qiun-columns {
		display: flex;
		flex-direction: column !important;
		padding: 5rpx;
		width: 90%;
		margin-bottom: 3rpx;
	}
	
	.container {
		// display: flex;
		// flex-direction: column;
		justify-content: center;
	  padding: 10rpx 15rpx;
	background-color: #8DC2FF; /* 浅蓝色背景 */
	border-radius: 15rpx; /* 弧度 */
	border: 2rpx solid #ffffff;
	// box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1); /* 投影效果，可选 */
	  height: 720rpx;
	  width: 90%;
	  margin-left: 30rpx;
	    // justify-content: center; /* 水平居中 */
		z-index: 0;
	}
	.container-small {
		
	background-color: #8DC2FF; /* 浅蓝色背景 */
	border-radius: 15rpx; /* 弧度 */
	border: 2rpx solid #ffffff;
	// box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1); /* 投影效果，可选 */
	  height: 72rpx;
	  width: 90%;
	  margin-left: 30rpx;
	  align-items: center;
	  justify-content: center; /* 水平居中 */
		z-index: 0;
	}
	
	.row {
	  display: flex;
	  align-items: center;
	  margin-top: 15rpx;
	  margin-bottom: 35rpx;
	}
	
	.label {
	  flex: 1;
	  text-align: left;
	  margin-right: 1rpx;
	  margin-left: 30rpx;
	  height: 60rpx;
	  font-size: 30rpx;
	  color: white;
	}
	.label-title {
	  flex: 1;
	  text-align: center;
	  // margin-right: 1rpx;
	  // margin-left: 30rpx;
	  height: 60rpx;
	  font-size: 40rpx;
	  color: white;
	}
	
	.picker,
	.input {
	  flex: 2;
	 border: none; /* 移除所有边框 */
	  border-bottom: 1rpx solid #ffffff; /* 添加白色下划线边框 */
	  border-radius: 0; /* 移除圆角 */
	  padding: 10rpx;
	  height: 55rpx;
	  margin-left: 5rpx;
	  margin-right: 30rpx;
	  font-size: 30rpx;
	  color: white;
	}
	.picker-o{
		flex: 2;
		border: 1rpx solid #ccc;
		height: 30rpx;
		padding: 30rpx 0 30rpx 10rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: black;
	}
	.header-more{
		
		background-color: #8DC2FF; /* 浅蓝色背景 */
			/* 浅蓝色背景 */
			color: white;
			padding: 3rpx 10rpx;
			border:1rpx solid #ffffff;
			
			border-radius: 10rpx;
			/* 圆角边框 */
			cursor: pointer;
			font-size: 19rpx;
			width: 300rpx;
			// margin-top: 4rpx;
			align-items: center;
			height: 100rpx;
		}
	
	
	.onoffimg{
		background: white;
		width: 700rpx;
		height: 110rpx;
		margin-left: 12rpx;
		display: flex;
		justify-content: center; 
		
		// align-items: center;
	}
	
		
	
		.header{
		  display: flex;
		  justify-content: center; /* 水平居中 */
		  // align-items: center; /* 垂直居中 */
		  height: 32%;
		  background: white;
		}
		.top-right-icon {
		  width: 50rpx; /* 根据实际情况调整大小 */
		  height: 50rpx; 
		 position: absolute; /* 添加绝对定位 */
		  top: 10rpx; /* 调整图片距顶部的距离 */
		  right: 10rpx; /* 调整图片距右侧的距离 */
		}
		
		.center{
			height: 600rpx;
			width: 750rpx;
			background: white;
			display: flex;
			justify-content: center; 
			align-items: center;
		}

	
		.tempbox {
			display: flex;
			height: 20%;
			// justify-content: center; /* 水平居中 */
			align-items: center;
			width: 93%;
			background-color: #AAAAAA; /* 灰色背景 */
			border-radius: 30rpx; /* 弧度 */
			// border: 2rpx solid #ffffff;
			// padding: 25rpx 32rpx; /* 内边距 */
			// box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1); /* 投影效果，可选 */
			margin: 30rpx;
			padding: 30rpx;
			// margin-right: 100rpx;
			// margin-top: 30rpx;
		}
	.temp-icon {
	  width: 105rpx;
	  height: 100%;
	  margin-right: 80rpx; /* 图片和文字之间的间隔 */
	}
	
	.temp-text {
		height: 100%;
		width: 250rpx;
		margin-left: 75rpx;
	  font-size: 30rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #ffffff; /* 白色背景 */
	  color:#515151;
	  // color: white;
	}

.centerimg{
	width: 580rpx;
	height: 580rpx;
	margin-top: 20rpx;
	 
}

	.modal-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  	z-index: 3;
	}
	
	.modal-content {
	  background: white;
	  border-radius: 10rpx;
	  width: 80%;
	  padding: 20rpx;
	}
	
	.modal-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20rpx;
	}
	
	.modal-title {
	  font-size: 45rpx;
	  font-weight: bold;
	  color: #8DC2FF;
	  border: 2rpx solid #ffffff;
	}
	
	.close-button {
	  font-size: 50rpx;
	  cursor: pointer;
	}
	
	.modal-body .form-group {
	  margin-bottom: 20rpx;
	  font-size: 35rpx;
	}
	
	.modal-body label {
	  display: block;
	  margin-bottom: 5rpx;
	}
	
	.modal-body input {
	  width: 100%;
	  height:100rpx;
	  padding: 10rpx;
	  border-radius: 10rpx;
	  border: 1rpx solid #ccc;
	}
	
	.modal-footer {
	  display: flex;
	  justify-content: space-between;
	  padding: 5rpx;
	  
	}
	
	.delete-button, .confirm-button {
	 background-color: #8DC2FF;
	 /* 浅蓝色背景 */
	 color: white;
	 padding: 8rpx 3rpx;
	 border: 1rpx solid #ffffff;
	 border-radius: 5rpx;
	 
	 /* 圆角边框 */
	 cursor: pointer;
	 
	 width: 200rpx;
	 
	 display: flex;
	 
	 justify-content: center;
	 // margin-top: 15rpx;
	 // margin-left: 15rpx;
	}
	

</style>
